<template>
  <main>
    <header class="act-header">
      <aside class="rules" @click="openRules">
        规则
        <span class="iconfont icon-jiantou-elm"></span>
      </aside>
    </header>
    <footer class="act-footer">
      <header class="act-footer-header flex-row-sb-center">
        <img src="https://gw.alicdn.com/tfs/TB1Ip3VeOpE_u4jSZKbXXbCUVXa-60-60.png" />
        <p class="notification">{{noti}}</p>
      </header>
      <aside class="noti-list">
        <ul class="list-ul">
          <li class="list-li" v-for="(item, index) in list" :key="index">{{item}}</li>
          <li class="list-li">{{list[0]}}</li>
        </ul>
      </aside>
      <button class="now-btn">立即赚现金</button>
      <p style="color: #f0c966;text-align: center;"><span class="iconfont icon-wp-sj"></span>查看赚钱攻略<span class="iconfont icon-jiantou-elm"></span></p>
      <main class="act-footer-main">
        <header class="flex-row-sb-center afm-header">
          <strong style="font-size: 26px;">奖励进度</strong>
          <i style="color: #9a9a9a;">进度明细<span class="iconfont icon-jiantou-elm"></span></i>
        </header>
        <main>
          <ul class="s-box">
            <li class="s-box-li flex-col-center">
              <p class="s m0">0<sub>元</sub></p>
              <p class="s-c m0">待下单</p>
            </li>
            <li class="s-box-li flex-col-center">
              <p class="s m0">0<sub>元</sub></p>
              <p class="s-c m0">在路上</p></li>
            <li class="s-box-li flex-col-center">
              <p class="s m0">0<sub>元</sub></p>
              <p class="s-c m0">已获得</p>
            </li>
            <li style="border-right: none;" class="s-box-li flex-col-center">
              <p class="s m0">0<sub>元</sub></p>
              <p class="s-c m0">已失效</p>
            </li>
          </ul>
        </main>
        <div class="money flex-row-sb-center">
          <p>
            <span style="font-size: 26px;">可提现金额：</span>
            <span class="s m0">0<sub>元</sub></span>
          </p>
          <span class="iconfont icon-jiantou-elm"></span>
        </div>
        <footer class="afm-footer">
          代理商/BD实名认证
          <span class="iconfont icon-jiantou-elm"></span>
        </footer>
      </main>
    </footer>
    <mt-popup
      v-model="popupVisible"
      >
      <h4 class="t-rules">活动规则</h4>
      <ol>
        <li v-for="(item, i) in rules" :key="i" class="ol-rules">{{item}}</li>
      </ol>
    </mt-popup>
  </main>
</template>

<script>
import { noti, list, rules } from '_c/mine/section/noti-list-data'
export default {
  name: 'activite-page',
  data() {
    return {
      noti,
      list,
      popupVisible: false,
      rules
    }
  },
  methods: {
    openRules() {
      this.popupVisible = true
    }
  }
}
</script>

<style scoped>
  .act-header {
    position: relative;
    width: 100%;
    height: 900px;
    background: url(https://gw.alicdn.com/tfs/TB14WSmiBBh1e4jSZFhXXcC9VXa-750-836.png) no-repeat;
    background-size: 100% 100%;
  }
  .rules {
    position: absolute;
    right: 0;
    top: 165px;
    padding: 10px;
    padding-left: 20px;
    width: 80px;
    background-color: rgba(0, 0, 0, .15);
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    white-space: nowrap;
    font-size: 26px;
    color: #fff;
  }
  .icon-jiantou-elm {
    font-size: 26px;
    vertical-align: sup;
  }
  .act-footer {
    width: 100%;
    margin-top: -1px;
    padding-bottom: 100px;
    background-color: #f9355e;
    border-top: 1px solid transparent;
  }
  .act-footer-header {
    width: 90%;
    margin: 50px auto 0;
    background-color: #f22c48;
  }
  .notification {
    padding-left: 10px;
    color: #fff;
    font-size: 26px;
  }
  .noti-list {
    width: 90%;
    height: 38px;
    margin: 0 auto;
    line-height: 30px;
    overflow: hidden;
  }
  .list-li {
    font-size: 26px;
    padding-bottom: 11px;
    color: #f0c966;
    text-align: center;
  }
  .list-ul {
    margin-top: 40px;
    animation: scroll 16s ease-in-out infinite;
  }
  .now-btn {
    display: block;
    width: 70%;
    height: 90px;
    margin: 20px auto;
    background: repeating-linear-gradient(#fbf4b8, #e5b245);
    border: none;
    border-radius: 45px;
    font-size: 40px;
  }
  .iconfont {
    font-size: 26px;
  }
  .afm-header {
    width: 80%;
    margin: 10px auto 0;
    background-color: #f9f9f9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 20px 15px;
  }
  .s-box {
    width: 80%;
    margin: 0 auto;
    padding: 20px 15px;
    background-color: #fff;
    display: flex;
  }
  .s {
    margin: 0;
    font-size: 38px;
    color: #ff5339;
  }
  sub {
    font-size: 22px;
  }
  .s-box-li {
    flex: 1;
    border-right: 1px solid #CCCCCC;
  }
  .s-c {
    font-size: 24px;
  }
  .money {
    width: 80%;
    padding: 10px 15px;
    background-color: #fff;
    margin: 40px auto 0;
  }
  .afm-footer {
    margin: 30px 0;
    text-align: center;
    color: #F0C966;
    font-size: 22px;
  }
  .t-rules {
    margin: 0;
    text-align: center;
    font-size: 26px;
  }
  .ol-rules {
    font-size: 22px
  }
  .mint-popup {
    width: 80%;
  }
  @keyframes scroll{
    5% {
      transform: translateY(-40px);
    }
    10% {
      transform: translateY(-40px);
    }
    15%{
        transform: translateY(-80px);
    }
    20%{
        transform: translateY(-80px);
    }
    25% {
      transform: translateY(-120px);
    }
    30% {
      transform: translateY(-120px);
    }
    35%{
        transform: translateY(-160px);
    }
    40%{
        transform: translateY(-160px);
    }
    45% {
      transform: translateY(-200px);
    }
    50% {
      transform: translateY(-200px);
    }
    55%{
        transform: translateY(-240px);
    }
    60%{
        transform: translateY(-240px);
    }
    65% {
      transform: translateY(-280px);
    }
    70% {
      transform: translateY(-280px);
    }
    75%{
        transform: translateY(-320px);
    }
    80%{
        transform: translateY(-320px);
    }
    85% {
      transform: translateY(-360px);
    }
    90%{
        transform: translateY(-360px);
    }
    95% {
      transform: translateY(-400px);
    }
    100%{
        transform: translateY(-400px);
    }
  }
</style>
